<template>
  <div>
    <div class="bangdan">
      <div class="bangdan-in banxin2 tanxin">
        <dl v-for="(item, index) in this.list.slice(0, 3)" :key="item.id">
          <dt class="tanxin">
            <div>
              <img width="80" :src="item.coverImgUrl" alt="" />
              <a href="#" class="msk" title="飙升榜"></a>
            </div>
            <div class="iname">
              <a href="#"
                ><h3>{{ item.name }}</h3></a
              >
              <div class="btn tanxin">
                <a href="#" class="btn-in-l"></a>
                <a href="#" class="btn-in-r"></a>
              </div>
            </div>
          </dt>
          <dd>
            <div class="liebiao">
              <ol>
                <li
                  v-for="(items, indexs) in b[index]"
                  :key="items.id"
                  class="tanxin"
                >
                  <i> {{ indexs + 1 + "." }}</i
                  ><span>{{ items.name }}</span>
                </li>
              </ol>
              <div class="more">
                <a href="#">查看更多&gt;</a>
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { BangdanApi, PersonalizedApi } from "@/request/api";
export default {
  created() {
    BangdanApi().then((res) => {
      console.log("榜单-----", res.data.list);
      this.list = res.data.list;
    });
    PersonalizedApi({ id: "19723756" }).then((res) => {
      console.log("榜单内容", res.data.playlist.tracks);
      this.c = res.data.playlist.tracks;
      for (let i = 0; i < 3; i++) {
        let b = this.c.slice(i * 10, i * 10 + 10);
        this.b.push(b);
      }
      console.log(this.b);
    });
  },
  data() {
    return {
      b: [],
      c: [],
      list: [],
    };
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets//base.less";
* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
.bangdan {
  .bangdan-in {
    transform: translateX(-127px);
    width: 729px;
    height: 472px;
    margin-top: 20px;
    padding-left: 1px;
    background-color: darkgoldenrod;
    background: url("https://s2.music.126.net/style/web2/img/index/index_bill.png?8c174acc8ead86b822fe25aea0c3fe28")
      no-repeat;
      background-size:  729px 472px;

    dl {
      margin-top: 20px;
      dt {
        justify-content: center;

        .iname {
          margin-top: 15px;
          margin-left: 15px;
        }
        .btn {
          margin-top: 10px;
          .btn-in-l {
            display: block;
            width: 22px;
            height: 22px;
            margin-right: 10px;
            text-indent: -9999px;
            background: url("../assets/btn1.png") no-repeat 9999px;
          }
          .btn-in-r {
            display: block;
            width: 22px;
            height: 22px;
            margin-right: 10px;
            text-indent: -9999px;
            background: url("../assets/btn2.png") no-repeat 9999px;
          }
        }
      }
      dd {
        width: 230px;
        height: 352px;
        .liebiao {
          ol {
            margin: 0 0 0 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            transform: translateY(20px);
            width: 180px;
            height: 319px;
            li {
              width: 180px;
              height: 32px;
              font-size: 12px;
              align-items: center;
              i {
                margin-right: 10px;
                font-size: 16px;
              }
              span {
                width: 170px;
                height: 32px;
                line-height: 32px;
                text-align: left;
                white-space: nowrap;
              }
            }
          }
          .more {
            text-align: right;
            margin-top: 30px;
            margin-right: 20px;
            a {
              color: #333;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>